var totalPage; //总页码
var currentPage = 1; //当前页
var pageSize = 4; //每页显示条数
Fdisplay(); //显示
bindPage(); //生成页码
addPageEvent(); //显示当前页的数据
fAddNewPosition(); //添加新职位
queryId(); //查询
delPosition(); //删除信息
modifyPosition(); //修改
btnCancelMod(); //取消修改
checkAll(); //全选按钮
cancelcheckAll(); //取消某一个多选框  全选按钮也取消选择


//显示
function Fdisplay() {
    var posArr = downLoad(posArr);
    $("#fempTbody").html("");
    var start = (currentPage - 1) * pageSize;
    var end = start + pageSize;
    for (var i = start; i < end && i < posArr.length; i++) {
        $("#fempTbody").append(
            `<tr>
            <td><input type="checkbox" class="All"></td>
            <td class="eposId">${posArr[i].ePosition}</td>
            <td class="Name">${posArr[i].posName}</td>
            <td class="Describe">${posArr[i].posDescribe}</td>
            <td class="Query">${posArr[i].posQueryAuthority}</td>
            <td class="Asses">${posArr[i].posAssessmentAuthority}</td>
            <td class="Sale">${posArr[i].posSale}</td>
            <td class="Manager">${posArr[i].posAuthorityManager}</td>
            <td class="Backstage">${posArr[i].posBackstageManager}</td>
            <td><button class="del btn btn-primary" data-id="${posArr[i].ePosition}">删除</button><button class="xiuGai btn btn-success" data-Pos="${i}">修改</button></td>
        </tr>`
        )
    }
}
//删除
function delPosition() {
    $("#tableBox").on("click", ".del", function() {
        $("#delPosDel").modal("show");
        var index = $(this).parent().parent();
        var id = $(this).attr("data-id"); //获取当前点击的自定义的属性值
        $('#delPosModqd').click(function() {
                index.remove();
                delposArrId(id); //删除对应数组
                $("#delSuccessModal").modal('show');
                bindPage(); //生成页码
                Fdisplay(); //显示
                empMod(); //清除修改框的input内容
            })
            //点击取消
        $("#delPosModqx").click(function() {
            $("#delPosDel").modal("hide");
        })
    })
}
//删除对应数组
function delposArrId(id) {
    var posArr = downLoad(posArr); //拉取
    var employeeArr = upEmp(employeeArr); //拉取员工信息数组
    // console.log(employeeArr);
    for (var i = 0; i < posArr.length; i++) {
        if (posArr[i].ePosition == id) { //如果用户点击的自定义的属性值等于数组内的id
            for (var j = 0; j < employeeArr.length; j++) {
                //找到该部门的员工
                if (posArr[i].ePosition == employeeArr[j].ePositionId) {
                    //将该部门员工职位变成0001，即为待定
                    employeeArr[j].ePositionId = "0001";
                    downEmp(employeeArr, employeeArr); //上传员工信息数据
                }
            }
            posArr.splice(i, 1); //删除数组内的值
            break;
        }
    }
    upLoad(posArr, posArr); //上传
}
//修改
function modifyPosition() {
    var posArr = downLoad(posArr);
    var xiugai;
    $("#fempTbody").on("click", ".xiuGai", function() {
            modifyTips();
            $("#correctMod").modal('show'); //点击按钮弹出修改框
            var index = $(this).attr('data-Pos'); //找到数组中对应的下标
            xiugai = index;
            $("#modName").val(posArr[index].posName);
            $("#modDescribe").val(posArr[index].posDescribe);

            var eposId = posArr[index].posQueryAuthority;
            if (eposId == "是") {
                $("#queryQxMod")[0].checked = true;
            } else {
                $("#queryQxMod")[0].checked = false;
            }
            var Asses = posArr[index].posAssessmentAuthority;
            if (Asses == "是") {
                $("#assessQxMod")[0].checked = true;
            } else {
                $("#assessQxMod")[0].checked = false;
            }
            var Sale = posArr[index].posSale;
            if (Sale == "是") {
                $("#saleQxMod")[0].checked = true;
            } else {
                $("#saleQxMod")[0].checked = false;
            }
            var Manager = posArr[index].posAuthorityManager;
            if (Manager == "是") {
                $("#qxGlMod")[0].checked = true;
            } else {
                $("#qxGlMod")[0].checked = false;
            }
            var Backstage = posArr[index].posBackstageManager;
            if (Backstage == "是") {
                $("#htGlMod")[0].checked = true;
            } else {
                $("#htGlMod")[0].checked = false;
            }
        })
        //判断是否为空
    $('#modName').blur(function() {
        if ($(this).val().length == 0) {
            $("#fModImg").removeClass('fPosImgy');
            $("#fModImg").addClass('fPosImgk');
            $("#fModImg").text("内容不能为空");
        } else {
            $("#fModImg").addClass('fPosImgy');
            $("#fModImg").text("");
        }
    })
    $('#modDescribe').blur(function() {
        if ($(this).val().length == 0) {
            $("#fModDiv").removeClass('fPosImgy');
            $("#fModDiv").addClass('fPosImgk');
            $("#fModDiv").text("内容不能为空");
        } else {
            $("#fModDiv").addClass('fPosImgy');
            $("#fModDiv").text("");
        }
    })
    $("#correctMod").on("click", "#fbtnAddMod", function() { //点击修改按钮修改
        if ($("#modName").val() != "" && $("#modName").val() != null && $("#modDescribe").val() != "" && $("#modDescribe").val() != null) {
            posArr[xiugai].posName = $("#modName").val();
            posArr[xiugai].posDescribe = $("#modDescribe").val();
            if ($("#queryQxMod")[0].checked) {
                posArr[xiugai].posQueryAuthority = "是";
            } else {
                posArr[xiugai].posQueryAuthority = "否";
            }
            if ($("#assessQxMod")[0].checked) {
                posArr[xiugai].posAssessmentAuthority = "是";
            } else {
                posArr[xiugai].posAssessmentAuthority = "否";
            }
            if ($("#saleQxMod")[0].checked) {
                posArr[xiugai].posSale = "是";
            } else {
                posArr[xiugai].posSale = "否";
            }
            if ($("#qxGlMod")[0].checked) {
                posArr[xiugai].posAuthorityManager = "是";
            } else {
                posArr[xiugai].posAuthorityManager = "否";
            }
            if ($("#htGlMod")[0].checked) {
                posArr[xiugai].posBackstageManager = "是";
            } else {
                posArr[xiugai].posBackstageManager = "否";
            }
            upLoad(posArr, posArr); //上传
            $('#modifySuccessModal').modal('show');
            empMod(); //清除修改框的input内容
            modifyTips(); //清除修改输入框后面的提示
            Fdisplay(); //显示
        } else {
            modifyTips(); //清除修改输入框后面的提示
            empMod(); //清除修改框的input内容
            $("#modifyFailModal").modal('show');
        }

    })
}
//点击清除键清除修改框的内容
function btnCancelMod() {
    $("#correctMod").on("click", "#fbtnCancelMod", function() {
        modifyTips(); //清除修改输入框后面的提示
        empMod(); //清除修改框的input内容的函数
    })

}
//清除修改框的input内容
function empMod() {
    $("#modName").val("");
    $("#modDescribe").val("");
    var modQx = document.getElementById("modQx").getElementsByTagName("input");
    for (var i = 0; i < modQx.length; i++) {
        if (modQx[i].checked) {
            modQx[i].checked = false;
        }
    }
}
//清除添加输入框后面的提示
function qcnr() {
    $("#fPosImg").text("");
    $("#fPosImg").removeClass("fPosImgy");
    $("#fPosImg").removeClass("fPosImgk");

    $("#fPosDiv").text("");
    $("#fPosDiv").removeClass("fPosImgy");
    $("#fPosDiv").removeClass("fPosImgk");
}
//清除修改输入框后面的提示
function modifyTips() {
    $("#fModImg").text("");
    $("#fModImg").removeClass("fPosImgy");
    $("#fModImg").removeClass("fPosImgk");

    $("#fModDiv").text("");
    $("#fModDiv").removeClass("fPosImgy");
    $("#fModDiv").removeClass("fPosImgk");
}
//添加新职位
function fAddNewPosition() {
    $("#faddBtnEmp").click(function() { //点击添加按钮弹出框显示
            $("#fAddNewmodal").modal('show');
        })
        //判断输入框是否为空
    $('#fPosName').blur(function() {
        if ($(this).val().length == 0) {
            $("#fPosImg").removeClass('fPosImgy');
            $("#fPosImg").addClass('fPosImgk');
            $("#fPosImg").text("内容不能为空");
        } else {
            $("#fPosImg").addClass('fPosImgy');
            $("#fPosImg").text("");
        }
    })
    $('#PosDescribe').blur(function() {
            if ($(this).val().length == 0) {
                $("#fPosDiv").removeClass('fPosImgy');
                $("#fPosDiv").addClass('fPosImgk');
                $("#fPosDiv").text("内容不能为空");
            } else {
                $("#fPosDiv").addClass('fPosImgy');
                $("#fPosDiv").text("");
            }
        })
        //判断内容是否为null
        // $('#fPosName').blur(function() {
        //     if ($(this).val() == null) {
        //         $("#fPosImg").removeClass('fPosImgy');
        //         $("#fPosImg").addClass('fPosImgk');
        //         $("#fPosImg").text("非法字符，请重新输入");
        //     } else {
        //         $("#fPosImg").addClass('fPosImgy');
        //         $("#fPosImg").text("");
        //     }
        // })
        // $('#PosDescribe').blur(function() {
        //         if ($(this).val() == null) {
        //             $("#fPosDiv").removeClass('fPosImgy');
        //             $("#fPosDiv").addClass('fPosImgk');
        //             $("#fPosDiv").text("非法字符，请重新输入");
        //         } else {
        //             $("#fPosDiv").addClass('fPosImgy');
        //             $("#fPosDiv").text("");
        //         }
        //     })
        //点击添加键
    $("#fbtnAdd").click(function() {
            var posArr = downLoad(posArr);
            var fPosName = $("#fPosName").val(); //职位名称
            var fPosDescribe = $("#PosDescribe").val(); //职位描述
            var queryQx; //查询权限
            var assessQx; //考核权限
            var saleQx; //销售统计分析
            var qxGl; //权限管理
            var htGl; //后台管理
            var newPositionId = Number(posArr[posArr.length - 1].ePosition) + 1; //职位ID
            if ($("#queryQx")[0].checked) {
                queryQx = "是";
            } else {
                queryQx = "否";
            }
            if ($("#assessQx")[0].checked) {
                assessQx = "是";
            } else {
                assessQx = "否";
            }
            if ($("#saleQx")[0].checked) {
                saleQx = "是";
            } else {
                saleQx = "否";
            }
            if ($("#qxGl")[0].checked) {
                qxGl = "是";
            } else {
                qxGl = "否";
            }
            if ($("#htGl")[0].checked) {
                htGl = "是";
            } else {
                htGl = "否";
            }
            var ss = { "ePosition": newPositionId, "posName": fPosName, "posDescribe": fPosDescribe, "posQueryAuthority": queryQx, "posAssessmentAuthority": assessQx, "posSale": saleQx, "posAuthorityManager": qxGl, "posBackstageManager": htGl }
            if (fPosName != "" && fPosName != null && fPosDescribe != "" && fPosDescribe != null) {
                posArr.push(ss); //添加到数组
                upLoad(posArr, posArr); //上传
                bindPage(); //生成页码
                $("#addCgMod").modal('show');
                Fdisplay(); //显示
                qcnr(); //清除输入框后面的提示
                empty(); //清除input的内容
            } else {
                $("#addSbMod").modal('show'); //添加失败
                qcnr(); //清除输入框后面的提示
                empty(); //清除input的内容
            }

        })
        //取消添加
    $("#fbtnCancel").click(function() {
            $("#fAddNewmodal").modal('hide');
            qcnr();
            empty();
        })
        //点击取消清除添加新职位弹出框input的内容
    function empty() {
        $("#fPosName").val("");
        $("#PosDescribe").val("");
        var qx = document.getElementById("qx").getElementsByTagName("input");
        for (var i = 0; i < qx.length; i++) {
            if (qx[i].checked) {
                qx[i].checked = false;
            }
        }
    }
}
//全选按钮
function checkAll() {
    $("#tableBox").on("click", "#selectAll", function() {
        var fempTbodyTr = document.getElementById("fempTbody").getElementsByTagName("input");
        for (var i = 0; i < fempTbodyTr.length; i++) {
            fempTbodyTr[i].checked = this.checked;
        }

    })
}
//取消某一个多选框  全选按钮也取消选择
function cancelcheckAll() {
    $("#fempTbody").on('click', '.All', function() {
        var isAll = true;
        $(".All").each(function(index, item) {
            if (!item.checked) {
                isAll = false;
            }
        })
        if (isAll) {
            $("#selectAll")[0].checked = true;
        } else {
            $("#selectAll")[0].checked = false;
        }
    })
}
//显示当前页的数据
function addPageEvent() {
    $('#pageDiv').on('click', '.btn', function() {
        currentPage = $(this).text();
        Fdisplay();
    })
}
//生成页码
function bindPage() {
    var posArr = downLoad(posArr);
    var totalSize = posArr.length; //总条数
    totalPage = Math.ceil(totalSize / pageSize); //总页数
    if (totalPage < currentPage) {
        currentPage = totalPage;
    }
    $('#pageDiv').html('');
    for (var i = 1; i <= totalPage; i++) {
        $('#pageDiv').append(`<button class="btn btn-default">${i}</button>`);
    }
}
//查询
function queryId() {

    $("#queryBox").on('input', function() {
        var query = $("#queryBox").val();
        if (query == "") {
            Fdisplay();
        } else {

            $("#fempTbody").html("");
            var posArr = downLoad(posArr);
            for (var i = 0; i < posArr.length; i++) {

                if (posArr[i].posName.indexOf(query) != -1 || posArr[i].posDescribe.indexOf(query) != -1) {
                    $("#fempTbody").append(
                        `<tr>
                <td><input type="checkbox" class="All"></td>
                <td class="eposId">${posArr[i].ePosition}</td>
                <td class="Name">${posArr[i].posName}</td>
                <td class="Describe">${posArr[i].posDescribe}</td>
                <td class="Query">${posArr[i].posQueryAuthority}</td>
                <td class="Asses">${posArr[i].posAssessmentAuthority}</td>
                <td class="Sale">${posArr[i].posSale}</td>
                <td class="Manager">${posArr[i].posAuthorityManager}</td>
                <td class="Backstage">${posArr[i].posBackstageManager}</td>
                <td><button class="del btn btn-primary" data-id="${posArr[i].ePosition}">删除</button><button class="xiuGai btn btn-success" data-Pos="${i}">修改</button></td>
            </tr>`
                    )
                }
            }
            for (var i in posArr) {
                if (posArr[i].ePosition == query) {
                    $("#fempTbody").html("");
                    $("#fempTbody").append(
                        `<tr>
            <td><input type="checkbox" class="All"></td>
            <td class="eposId">${posArr[i].ePosition}</td>
            <td class="Name">${posArr[i].posName}</td>
            <td class="Describe">${posArr[i].posDescribe}</td>
            <td class="Query">${posArr[i].posQueryAuthority}</td>
            <td class="Asses">${posArr[i].posAssessmentAuthority}</td>
            <td class="Sale">${posArr[i].posSale}</td>
            <td class="Manager">${posArr[i].posAuthorityManager}</td>
            <td class="Backstage">${posArr[i].posBackstageManager}</td>
            <td><button class="del btn btn-primary" data-id="${posArr[i].ePosition}">删除</button><button class="xiuGai  btn btn-success" data-Pos="${i}">修改</button></td>
        </tr>`
                    )
                }
            }
        }

    })
}

//上传
function upLoad(posArr, posArr) {
    //将员工信息数组转换成字符串
    var posArrr = JSON.stringify(posArr);
    //将数据上传至服务器
    localStorage.setItem("posArr", posArrr);
}
//拉取
function downLoad(posArr) {
    //从服务器拉取下来数据
    var pos = localStorage.getItem("posArr");
    var posArr = JSON.parse(pos);
    //将数据上传至服务器
    return posArr;
}

function downEmp(employeeArr, employeeArr) {
    var employeeArrr = JSON.stringify(employeeArr);
    localStorage.setItem("employeeArr", employeeArrr);
}
//拉取
function upEmp(employeeArr) {
    var emp = localStorage.getItem("employeeArr");
    var employeeArr = JSON.parse(emp);
    return employeeArr
}